<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		
		
		<style>
			.box1 {
				border: 10px red solid;
				
				/*overflow: hidden;*/
			}
			
			.box2 {
				width: 100px;
				height: 100px;
				background-color: #bfa;
				float: left;
			}
			
			/*这种形式也可以很完美的解决高度塌陷的问题,因为box3清除了box2的浮动影响(但是不推荐使用html来解决css的问题)*/
			/*.box3 {*/
			/*	clear: both;*/
			/*}*/
			
			/*使用伪元素选择器 (推荐这种形式)
				::after默认添加的元素是行内元素,使用清除浮动无效,所以要转换成块元素
			*/
			.box1::after {
				content: '';
				display: block;
				clear: both;
			}
		</style>
	
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
<!--			<div class="box3">aa</div>-->
		</div>
	
	</body>
</html>
